<template>
    <div class="" style="height: 60vh;">
        <div>
            <el-form :model="condition" ref="form" label-width="90px" :inline="true">
                <el-form-item label="单据编号：">
                    <el-input v-model="condition.headNumber" placeholder="请输入单据编号"></el-input>
                </el-form-item>
                <el-form-item label="单据日期：">
                    <el-date-picker type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
                        date-format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width: 280px; margin-left: 10px;"
                        v-model="timeRange" unlink-panels />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findMaterialBill()">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="exportBtn">
                        <el-icon class="el-icon--left">
                            <Download />
                        </el-icon>
                        导出
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table ref="tableRef" :data="page.records" border stripe>
                <el-table-column type="index" label="#" align="center" width="60" />
                <el-table-column v-for="col in tableHeader" :prop="col.prop" :key="col.id" :label="col.label"
                    :width="col.width">
                    <template #default="scope">
                        <el-button v-if="col.prop == 'headNumber'" type="primary" link size="default"
                            @click="toBillDetail(scope.row.headNumber)" :row="scope.row">
                            {{ scope.row.headNumber }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :current="page.current" :page-size="page.size" :total="page.total" @change="findMaterialBill"
                @update:pageSize="sizeChange" @update:current="currentChange" />
        </div>
        <div class="btn-close">
            <el-button @click="close">取消</el-button>
        </div>


        <!-- <el-dialog :title="dialogTitle" v-model="visible" width="100%" destroy-on-close> -->
        <!-- <router-view @close="subClose" :data="subData"></router-view> -->
        <!-- </el-dialog> -->
    </div>
</template>

<script lang='ts' setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import request from '@/api/request';
import { exportTable } from '@/utils/xlsx';
import Pagination from '@/components/pagination/Index.vue'
const form = ref(null)
const tableRef = ref(null)
let visible = ref(false)
let subData = ref({})

const emits = defineEmits(['close', 'jump'])

class Stater {
    headNumber: String;
    createTime: null;
    endTime: null;
}

// 日期引用
let timeRange = ref(null)
// 查询条件
const condition = ref(new Stater)

const data = defineProps(['data'])

const page = ref({
    current: 1,
    size: 5,
    pages: 1,
    total: 1,
    records: null
});

const findMaterialBill = () => {
    if (timeRange.value) {
        condition.value.createTime = timeRange.value[0]
        condition.value.endTime = timeRange.value[1]
    } else {
        condition.value.createTime = null
        condition.value.endTime = null
    }
    request.get("report/findMaterialBill", {
        params: {
            ...condition.value, current: page.value.current, size: page.value.size, materialId: data.data.id
        }
    }).then(resp => {
        page.value = resp.data
    })
}

const sizeChange = (pageSize: number) => {
    page.value.size = pageSize;
    findMaterialBill
}

const currentChange = (pageCurrent: number) => {
    page.value.current = pageCurrent;
    findMaterialBill
}

const tableHeader = ref([
    {
        id: 1,
        label: '单据编号',
        prop: 'headNumber',
        width: '158'
    },
    {
        id: 2,
        label: '类型',
        prop: 'type',
        width: '144'
    },
    {
        id: 3,
        label: '条码',
        prop: 'barCode',
        width: '130'
    },
    {
        id: 4,
        label: '名称',
        prop: 'materialName',
        width: '260'
    },
    {
        id: 5,
        label: '仓库名称',
        prop: 'deportName',
        width: '115'
    },
    {
        id: 6,
        label: '数量',
        prop: 'number',
        width: '102'
    },
    {
        id: 7,
        label: '日期',
        prop: 'time'
    },
]);

const toBillDetail = (headNumber: string) => {
    request.get('report/getDeportHead', {
        params: {
            headNumber
        }
    }).then(resp => {
        emits('jump', resp.data)
    })
}

const close = () => {
    emits('close')
}



const reset = () => {
    condition.value = new Stater()
}

const exportBtn = () => {
    exportTable(tableRef, '商品库存流水报表')
}

onMounted(() => {
    findMaterialBill()
})
</script>

<style scoped></style>
